<template>
  <div id="app">
    <!-- 使用搜索表单组件 -->
    <LssSeacrhForm
      :searcFiledsList="searcFiledsList"
      :searchForm="searchForm"
      @select-change="handleSelectChange"
      @onSearch="handleSearch"
      @onReset="handleReset"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, h } from 'vue'

// 定义搜索表单数据
const searchForm = ref<SearchFormType>({
  // name: '',
  // gender: '',
  // birthDate: ''
})

const searcFiledsList: SearchColumns[] = [
  { prop: 'name', label: 'Name', type: 'input', isRest: false },
  { prop: 'date', label: 'Date', type: 'daterange', fields: ['createTimeStart', 'createTimeEnd'] },
  {
    label: '性别',
    prop: 'gender',
    type: 'select',
    selectOptions: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' }
    ]
  }
  // 更多搜索字段配置
]

const params = {
  agentNo: '11223'
}

// 处理下拉框选择变化
const handleSelectChange = (item: any) => {
  console.log('Select changed:', item)
}

// 处理搜索
const handleSearch = () => {
  console.log('Search clicked:', searchForm.value)
}

// 处理重置
const handleReset = () => {
  console.log('Reset clicked')
}
</script>
